<!-- 订单列表页面 -->
<template>
  <!-- 筛选搜索 -->
  <el-card>
    <div class="card-header">
      <div class="card-header-l">
        <el-icon>
          <el-icon-search />
        </el-icon>
        <span>筛选搜索</span>
      </div>
      <div>
        <el-button class="button">重置</el-button>
        <el-button class="button" type="primary" @click="Selection">查询搜索</el-button>
      </div>
    </div>
    <div class="Filter-search-box">
      <!-- 订单编号 -->
      <div class="inputbox">
        <span class="search-text">输入搜索:</span>
        <el-input placeholder="订单编号" v-model="dataold.orderSn"></el-input>
      </div>
      <!-- 收货人员信息 -->
      <div class="inputbox">
        <span class="search-text">收货人员:</span>
        <el-input placeholder="收货人姓名/号码" v-model="dataold.receiverKeyword"></el-input>
      </div>
      <!-- 提交时间 -->
      <div class="inputbox">
        <span class="search-text">提交时间:</span>
        <el-form-item style="width: 200px">
          <el-date-picker type="date" placeholder="请选择时间" v-model="cascader.dataday" />
        </el-form-item>
      </div>
      <!-- 订单状态 -->
      <div class="inputbox">
        <span class="search-text">订单状态:</span>
        <el-select placeholder="全部" v-model="cascader.option">
          <el-option :label="item" :value="item" v-for="item, index in cascader.options" :key="index"
            @click="orderstatus(index)"></el-option>
        </el-select>
      </div>
      <!-- 订单分类 -->
      <div class="inputbox">
        <span class="search-text">订单分类:</span>
        <el-select placeholder="全部" v-model="cascader.option1">
          <el-option :label="item" :value="item" v-for="item, index in cascader.options1" :key="index"
            @click="classification(index)"></el-option>
        </el-select>
      </div>
      <!-- 订单来源 -->
      <div class="inputbox">
        <span class="search-text">订单来源:</span>
        <el-select placeholder="全部" v-model="cascader.option2">
          <el-option :label="item" :value="item" v-for="item, index in cascader.options2" :key="index"
            @click="ordersource(index)"></el-option>
        </el-select>
      </div>
    </div>

  </el-card>
  <!-- 数据列表 -->
  <dadalist></dadalist>
  <!-- 表格 -->
  <el-card>
    <el-table border width="100%" :data="ordersdata">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="orderSn" label="订单编号" />
      <el-table-column label="提交时间">
        <template #default>
          {{ handleDate("createTime") }}
        </template>
      </el-table-column>
      <el-table-column prop="memberUsername" label="用户账号" />
      <el-table-column prop="payAmount" label="订单金额" />
      <el-table-column label="支付方式">
        <template #default="{row}">
          {{ abs(row.payType) }}
        </template>
      </el-table-column>
      <el-table-column prop="sourceType" label="订单来源" />
      <el-table-column prop="status" label="订单状态" />
      <el-table-column prop="email" label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" text>查看订单</el-button>
          <el-button type="danger" size="small" text>删除订单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import dadalist from "../../components/Data-List.vue";
import { getOrderListApi } from "@/request/order";
import { handleDate } from "@/utils";


let ordersdata = ref([])


const cascader = reactive({
  
  option: "",
  option1: "",
  option2: "",
  options: ["正常订单", "秒杀订单"],
  options1: ['待付款', '待发货', '已发货', '已完成', '已关闭'],
  options2: ['PC订单', 'App订单'],
  dataday: ""
})

interface typelist {
  pageNum: 1,
  pageSize: 10,
  orderSn: number | null,
  receiverKeyword: string | null,
  createTime: string | null,
  orderType: number | null,
  status: number | null,
  sourceType: number | null
}

let dataold = reactive<typelist>({
  pageNum: 1,
  pageSize: 10,
  orderSn: null,
  receiverKeyword: null,
  createTime: null,
  orderType: null,
  status: null,
  sourceType: null
})

async function orderlistapi() {
  let res = await getOrderListApi(dataold);
  ordersdata.value = res.data.list
}
orderlistapi()

function abs(payType: string | number) {
  if (payType === 0) {
    return (payType = "未支付")
  } else if (payType === 1) {
    return (payType = "支付宝")
  } else if (payType === 2) {
    return (payType = "微信")
  }
}

//订单状态
function orderstatus(idx: number) {
  dataold.orderType = idx
  console.log(dataold.orderType);
}
//订单分类
function classification(idx: number) {
  dataold.status = idx
  console.log(dataold.status);
}
//订单来源
function ordersource(idx: number) {
  dataold.sourceType = idx
  console.log(dataold.sourceType);
}
//筛选搜索
function Selection() {
  orderlistapi()
}
</script>
<style lang="scss" scoped>
.el-icon-edit {
  width: 20px;
  height: 20px;
}

.card-header-l {
  display: flex;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-input {
  width: 214px;
  color: #000;
}

.search-text {
  margin-right: 18px;
}

.inputbox {
  display: flex;
  align-items: center;
}

.Filter-search-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex-wrap: wrap;
  // justify-content: space-between;
  padding: 30px 80px;
}

.el-select {
  width: 200px;
}

.inputbox {
  margin-bottom: 30px;
  margin-right: 100px;
}

.el-card {
  margin: 20px;
}

.el-table {
  margin: 20px 0px;

}
</style>
